import advList from '$v/advList'
import { isLoginRequest } from '../api/admin'
import { advRequest, advListRequest, deleteRequest, getUpDataRequest, updateAdvRequest } from '../api/adv'

//封装一个获取所有广告列表的函数
const getAllAdvList = async (pageNo=1, everyNum=3) => {
  //发送请求
  try {
    //一旦return 则当前函数返回一个promise实例 值为当前await的返回值
    return await advListRequest(pageNo, everyNum);
  } catch (e) {
    alert("查询出现错误" + e.message);
    //判断是否是权限异常
    if (!e.isLogin) {
      return router.go("/login");
    }
  }

}


export default async (req, res) => {
  //路由切换的时候验证登录
  try {
    await isLoginRequest()
  } catch (e) {
    if (!e.isLogin) {
      return router.go('/login')
    }
  }
  //调用
  const { advLists, advCount } = await getAllAdvList()
  //根据数据渲染页面
  res.render(advList({
    advLists,
    advCount
  }))




  document.onclick = async function (e) {
    //添加广告逻辑
    if (e.target.id === 'adv-save') {
      //console.log(1);
      //收集表单数据 使用formData js自带的
      const myForm = new FormData(document.advForm)
      //用get方式可以获取到表单的内容
      //console.log(myFormData.get('advTitle'));
      //判断用户内容不能输入为空
      if (!myForm.get('advTitle') || !myForm.get("advType") || !myForm.get("advOrder") || !myForm.get("advPic")) {
        return alert('添加的内容不能为空')
      }
      //向后端发送添加广告请求
      try {
        await advRequest(myForm)
        alert('添加图片成功')
        //关闭添加广告的弹窗
        document.getElementById("addClose").click();
        //把预览的img隐藏
        const oPreImg = document.getElementById('preImg');
        oPreImg.style.display = "none"
        //清空表单
        document.advForm.reset();
        //重新渲染视图
        //调用获取adv列表的函数
        const { advLists } = await getAllAdvList()
        //根据数据渲染
        res.render(advList({
          advLists
        }))
      } catch (e) {
        alert('添加广告错误' + e.message);
        if (!e.isLogin) {
          //关闭添加广告的弹窗再跳转
          document.getElementById("addClose").click();
          return router.go("/login");
        }
      }
    }
    //删除广告逻辑
    if (e.target.nodeName === "BUTTON" && e.target.classList.contains('btn-delete')) {
      //console.log(e,'e');
      //获取到当前按钮上保存的数据的id  
      const _id = e.target.dataset.id
      // console.log(e.target.dataset.id,'e.target.dataset.id');
      //console.log(_id,'_id');
      try {
        await deleteRequest(_id)
        alert('删除图片成功')
        //调用获取adv列表的函数
        const { advLists } = await getAllAdvList()
        //根据数据渲染
        res.render(advList({
          advLists
        }))
      } catch (e) {
        alert('删除图片失败' + e.message)
        if (!e.isLogin) {
          //关闭添加广告的弹窗再跳转
          document.getElementById("addClose").click();
          return router.go("/login");
        }
      }
    }
    //更新广告逻辑
    if (e.target.nodeName === "BUTTON" && e.target.classList.contains("btn-update")) {
      //可以在视图中手动增加一个id
      const _id = e.target.dataset.id
      //console.log(_id,'_id');
      try {
        const getUpDataResult = await getUpDataRequest(_id)
        //拿到后台响应回来的数据后  把数据填到表单中
        //console.log(getUpDataResult, 'getUpDataResult');
        document.updateForm.advTitle.value = getUpDataResult.advTitle;
        document.updateForm.advType.value = getUpDataResult.advType;
        document.updateForm.advOrder.value = getUpDataResult.advOrder;
        //给当前弹窗的更新按钮上添加一个自定义属性 保存当前数据的id  方便以后提交
        document.getElementById('adv-update').dataset.id = getUpDataResult._id;
      } catch (e) {
        alert('更新查询失败' + e.message)
      }

    }
    //点击更新逻辑
    if (e.target.id === "adv-update") {
      const _id = e.target.dataset.id;
      //console.log(_id, '_id');
      //收集表单数据 使用FormData
      const myForm = new FormData(document.updateForm);
      //console.log(myForm, 'myForm');
      if (!myForm.get("advTitle") || !myForm.get("advType") || !myForm.get("advOrder") || !myForm.get("advPic")) {
        return alert("更新内容不能为空")
      }

      try {
        await updateAdvRequest(myForm, _id);
        console.log("更新成功");

        //重新渲染视图
        //调用获取adv列表的函数
        const advLists = await getAllAdvList()
        //console.log(advLists,'advLists');
        //根据数据渲染
        res.render(advList({
          advLists
        }))

        //关闭添加广告的弹窗再跳转
        document.getElementById("updateClose").click();

        document.querySelector('.modal-backdrop').style.display = "none";

      } catch (e) {
        alert("更新广告异常" + e.message);
        //判断是否是权限异常
        if (!e.isLogin) {
          //关闭添加广告的弹窗再跳转
          document.getElementById("updateClose").click();
          return router.go("/login");
        }
      }
    }

    //点击页码
    if (e.target.nodeName === "SPAN" && e.target.parentNode.id === "page") {
      console.log(111);
      const pageNo = +e.target.dataset.pageno
      //重新发送请求 
      const { advLists, advCount } = await getAllAdvList(pageNo)
      //根据数据渲染页面
      res.render(advList({
        advLists,
        advCount
      }))
    }
  }

  //创建图片预览
  document.onchange = function (e) {
    //判断是否当前的事件元素
    if (e.target.id === 'advPic') {
      //console.log(e.target.files[0]); //files //文件上传的事件中，当上传完成，在当前的input对象上有一个files属性,包含了上传所有文件信息组成的数组
      //FileReader是js提供的异步读取文件的类,和input的file配合使用,实例化以后得到一个对象,提供了很多方法可以读取文件
      const reader = new FileReader()
      //reader上有一个readAsDataURL方法 可以把文件读成base64的格式
      reader.readAsDataURL(e.target.files[0])
      //当读取完成后会有一个事件
      reader.onload = function (e) {
        //console.log(e.target.result); //e.target.result 拿到图片Base64格式  给到img
        //获取到图片节点
        const opreImg = document.getElementById('preImg')
        opreImg.src = e.target.result
        opreImg.style.display = 'block'
      }
    }
  }
}